<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>疫情大数据</title>
    <script src="../js/echarts.js"></script>
    <!--    <script src="js/echarts.js/echarts.min.js"></script>-->
    <script src="../js/china.js"></script>
    <script src="../js/jquery.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <link href="../css/bootstrap.css" rel="stylesheet"/>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #main {
            width: 600px;
            height: 450px;
            margin: 150px auto;
            border: 1px solid #ddd;
        }

        /*默认长宽比0.75*/
        .center {
            margin: auto;
            width: 70%;
        }
    </style>
    <style>
        .el-header {
            background-color: #ffffff;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
        .box-card {
            width: 1000px;
        }

    </style>


</head>
<body>

<div id="app" >
    <div id="covid_all" class="center">
        <h2 align="center">实时疫情大数据平台</h2>
        <table class="table table-bordered" bgcolor="#b0e0e6">
            <thead>
            <tr>
                <th>
                    时间
                </th>
                <th>
                    现存确诊
                </th>
                <th>
                    累计确诊
                </th>
                <th>
                    现存疑似
                </th>
                <th>
                    累计治愈
                </th>
                <th>
                    累计死亡
                </th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td id="datetime">1</td>
                <td id="currentConfirmedCount">1</td>
                <td id="confirmedCount">1</td>
                <td id="suspectedCount">1</td>
                <td id="curedCount">1</td>
                <td id="deadCount">1</td>
            </tr>
            </tbody>
        </table>
    </div>
    <!--侧边框-->
    <el-container style="height: 700px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']" @open="handleOpen" @close="handleClose">
                <el-menu-item index="1" @click="btn1()">
                    <i class="el-icon-menu"></i>
                    <span slot="title">全国地图</span>
                </el-menu-item>
                <el-menu-item index="2" @click="btn2()">
                    <i class="el-icon-menu"></i>
                    <span slot="title">时间趋势折线图</span>
                </el-menu-item>
                <el-menu-item index="3" @click="btn3()">
                    <i class="el-icon-menu"></i>
                    <span slot="title">境外输入饼图</span>
                </el-menu-item>
                <el-menu-item index="4" @click="btn4()">
                    <i class="el-icon-menu"></i>
                    <span slot="title">救援物资</span>
                </el-menu-item>

            </el-menu>
        </el-aside>
        <!--装容器正文部分-->
        <el-main>
            <!--                <el-card class="box-card">-->
            <div id="all" style="width: 1500px;height:600px;" class="center"></div>
            <!--                </el-card>-->
        </el-main>
        <!--        </el-container>-->
    </el-container>
</div>


<!--<div id="map_all" style="width: 1500px;height:600px;" class="center"></div>-->
<!--    <br>-->
<!--    <hr>-->
<!--<div id="time_line" style="width: 1500px;height:600px;" class="center"></div>-->
<!--    <br>-->
<!--    <hr>-->
<!--<div id="import_pie" style="width: 1500px;height:600px;" class="center"></div>-->
<!--    <br>-->
<!--    <hr>-->
<!--<div id="covid19_wz" style="width: 1500px;height:600px;" class="center"></div>-->
</body>

<script type="text/javascript">



    new Vue({
        el: "#app",
        mounted(){
            /*--------------------救援物资-----------------------------*/
            // 基于准备好的dom容器，初始化ECharts实例
            var myChart = echarts.init(document.getElementById('all'));
            myChart.setOption({
                title: {
                    text: '救援物资'
                },
                legend: {},
                tooltip: {},
                dataset: {
                    // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
                    dimensions: ['name', '采购', '下拨', '捐赠', '消耗', '需求', '库存'],
                    source: []
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {},
                series: [
                    {type: 'bar'},
                    {type: 'bar'},
                    {type: 'bar'},
                    {type: 'bar'},
                    {type: 'bar'},
                    {type: 'bar'}
                ]
            });

            var xdata = [];//x轴
            setInterval(function () {
                $.getJSON("http://localhost:8080/covid/getCovidWz", function (data) {
                    var arr = data.data
                    xdata = []
                    for (var i = 0; i < arr.length; i++) {
                        xdata.push(arr[i].name)
                    }
                    myChart.setOption({
                        dataset: {
                            source: data.data
                        },
                        xAxis: {
                            data: xdata
                        }
                    })
                })
            }, 2000)
        },
        methods: {
            btn1() {
                window.location.href = " html1.html " ;
            },
            btn2() {
                window.location.href = " html2.html " ;
            },
            btn3() {
                window.location.href = " html3.html " ;
            },
            btn4() {
                window.location.href = " html4.html " ;
            }

        }
    })

    /*--------------------全国统计数据-----------------------------*/
    $.getJSON("http://localhost:8080/covid/getNationalData", function (data) {
        var map = data.data
        $("#datetime").html(map.datetime)
        $("#currentConfirmedCount").html(map.currentConfirmedCount)
        $("#confirmedCount").html(map.confirmedCount)
        $("#suspectedCount").html(map.suspectedCount)
        $("#curedCount").html(map.curedCount)
        $("#deadCount").html(map.deadCount)
    })









</script>
</html>